<script setup>
import {computed, inject} from 'vue'
import {GameState} from "../enum.js";

const game = inject('game')

const count = computed(() => {
  let time = game.timer
  let hours = parseInt(time / 60 / 60 % 24)
  let minutes = parseInt(time / 60 % 60)
  let seconds = parseInt(time % 60)

  let str = ''
  str += (hours < 10 ? '0' + hours : hours) + ':'
  str += (minutes < 10 ? '0' + minutes : minutes) + ':'
  str += (seconds < 10 ? '0' + seconds : seconds)
  return str
})


const emit = defineEmits(['onPause', 'onContinue'])

// 暂停游戏
function onPause() {
  game.pause()
  emit('onPause')
}
</script>

<template>
  <div class="timer mt-3" style="--wails-draggable: no-drag">
    <div class="btn-pause" @click="onPause" v-if="game.state === GameState.STARTED">
      <div class="icon">
        <svg t="1716274550137" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="2318" id="mx_n_1716274550184" width="24" height="24">
          <path d="M121.3 680.4m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#94a3b8"
                p-id="2319"></path>
          <path d="M266.5 855.6m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#94a3b8"
                p-id="2320"></path>
          <path
              d="M512 35.6C252.8 35.6 42.6 245.7 42.6 505c0 69 14.9 134.6 41.7 193.6l74.2-35.4c-21.7-48.3-33.7-101.8-33.7-158.2 0-213.8 173.3-387.2 387.2-387.2S899.2 291.1 899.2 505 725.8 892.1 512 892.1c-81.9 0-157.9-25.4-220.4-68.8l-51.2 57.2c1.5 0.7 2.5 2.1 2.5 3.6s0.3 3.2-1.2 3.9c76.7 54.5 169.2 86.2 270.4 86.2 259.2 0 469.4-210.1 469.4-469.4S771.2 35.6 512 35.6z"
              fill="#1e293b" p-id="2321"></path>
          <path
              d="M419.9 329.1c22.6 0 41 18.3 41 41v261.7c0 22.6-18.3 41-41 41-22.6 0-41-18.3-41-41V370.1c0-22.6 18.4-41 41-41zM610.9 329.1c22.6 0 41 18.3 41 41v261.7c0 22.6-18.3 41-41 41-22.6 0-41-18.3-41-41V370.1c0-22.6 18.4-41 41-41z"
              fill="#1e293b" p-id="2322"></path>
        </svg>
      </div>
      <div class="text">暂停游戏</div>
    </div>
    <div>
      <svg t="1716274227111" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="1859" width="24" height="24">
        <path d="M121.3 676.4m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#94a3b8"
              p-id="1860"></path>
        <path d="M266.5 851.6m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#94a3b8"
              p-id="1861"></path>
        <path
            d="M512 31.6C252.8 31.6 42.6 241.7 42.6 501c0 69 14.9 134.6 41.7 193.6l74.2-35.4c-21.7-48.3-33.7-101.8-33.7-158.2 0-213.8 173.3-387.2 387.2-387.2S899.2 287.1 899.2 501 725.8 888.1 512 888.1c-81.9 0-157.9-25.4-220.4-68.8l-51.2 57.2c1.5 0.7 2.5 2.1 2.5 3.6s0.3 3.2-1.2 3.9c76.7 54.5 169.2 86.2 270.4 86.2 259.2 0 469.4-210.1 469.4-469.4S771.2 31.6 512 31.6z"
            fill="#94a3b8" p-id="1862"></path>
        <path
            d="M512 287.4c22.6 0 41 18.3 41 41V501c0 22.6-18.3 41-41 41-22.6 0-41-18.3-41-41V328.3c0-22.6 18.4-40.9 41-40.9z"
            fill="#94a3b8" p-id="1863"></path>
        <path
            d="M789.8 663.2c-11.3 19.6-36.4 26.3-55.9 15L492.2 538.6c-19.6-11.3-26.3-36.4-15-55.9 11.3-19.6 36.4-26.3 55.9-15l241.7 139.5c19.6 11.3 26.3 36.4 15 56z"
            fill="#94a3b8" p-id="1864"></path>
      </svg>
    </div>
    <div class="count">
      <div>{{ count }}</div>
    </div>
    <div>
      <svg t="1716277005406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2488" width="24" height="24">
        <path d="M121.3 676.4m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#94a3b8"
              p-id="2489"></path>
        <path d="M266.5 851.6m-40.9 0a40.9 40.9 0 1 0 81.8 0 40.9 40.9 0 1 0-81.8 0Z" fill="#94a3b8"
              p-id="2490"></path>
        <path
            d="M512 31.6C252.8 31.6 42.6 241.7 42.6 501c0 69 14.9 134.6 41.7 193.6l74.2-35.4c-21.7-48.3-33.7-101.8-33.7-158.2 0-213.8 173.3-387.2 387.2-387.2S899.2 287.1 899.2 501 725.8 888.1 512 888.1c-81.9 0-157.9-25.4-220.4-68.8l-51.2 57.2c1.5 0.7 2.5 2.1 2.5 3.6s0.3 3.2-1.2 3.9c76.7 54.5 169.2 86.2 270.4 86.2 259.2 0 469.4-210.1 469.4-469.4S771.2 31.6 512 31.6z"
            fill="#94a3b8" p-id="2491"></path>
        <path
            d="M379.9 348.8c11.3-19.6 36.4-26.3 55.9-15l226.6 130.9c19.6 11.3 26.3 36.4 15 55.9-11.3 19.6-36.4 26.3-55.9 15L394.9 404.7c-19.6-11.3-26.3-36.3-15-55.9z"
            fill="#94a3b8" p-id="2492"></path>
        <path
            d="M416.2 328.3c22.6 0 41 18.3 41 41V631c0 22.6-18.3 41-41 41-22.6 0-41-18.3-41-41V369.2c0-22.6 18.4-40.9 41-40.9z"
            fill="#94a3b8" p-id="2493"></path>
        <path
            d="M677.5 478.6c11.5 19.5 5.1 44.6-14.4 56.1L437.8 667.9c-19.5 11.5-44.6 5.1-56.1-14.4s-5.1-44.6 14.4-56.1l225.3-133.2c19.5-11.5 44.6-5 56.1 14.4z"
            fill="#94a3b8" p-id="2494"></path>
      </svg>
    </div>
  </div>
</template>